<template>
  <div class="app-container">
    <el-tabs >
      <el-tab-pane v-if="$store.getters.role === 1" label="题库做题详情" name="0" />
    </el-tabs>
    <div class="filter-container">
      <el-form
        :model="query"
        :inline="true"
        size="mini"
        label-position="right"
        label-width="70px"
      >
        <el-form-item label="手机号" prop="exaType">
          <el-input v-model="query.phone" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            icon="el-icon-search"
            type="primary"
            plain
            @click="getList()"
            >查询</el-button
          >
          <el-button
            size="mini"
            icon="el-icon-refresh-right"
            @click="query = { pageNo: 1, pageSize: 20, total: 0 }"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      row-key="id"
      border
      fit
      highlight-current-row
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column
        min-width="200px"
        align="center"
        :show-overflow-tooltip="true"
        label="昵称"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.name"></span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        align="center"
        :show-overflow-tooltip="true"
        label="手机号"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.phone"></span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="200px"
        align="center"
        :show-overflow-tooltip="true"
        label="完成题目数"
      >
        <template slot-scope="scope">
          {{scope.row.completeSum}}
        </template>
      </el-table-column>
      <el-table-column
        min-width="200px"
        align="center"
        :show-overflow-tooltip="true"
        label="题目完成率"
      >
        <template slot-scope="scope">
          {{scope.row.completeInterestRate|to100}}
        </template>
      </el-table-column>
      <el-table-column
        min-width="100px"
        align="center"
        :show-overflow-tooltip="true"
        label="题目正确率"
      >
        <template slot-scope="scope">
          {{scope.row.trueInterestRate|to100}}
        </template>
      </el-table-column>
     
    </el-table>
    <el-pagination
      :current-page="query.pageNo"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="query.pageSize"
      :total="query.total"
      layout="total, sizes, prev, pager, next, jumper"
      background
      class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import waves from "@/directive/waves";
import { getQuestionInfoUseInfo } from "@/api/statistical.js";
export default {
  name: "StatisticsQuestionInfo",
  directives: { waves },
  data() {
    return {
      listLoading: false,
      list: [],
      questionInfoId:-1,
      query: {
        pageNo: 1,
        pageSize: 20,
        total: 0,
      },
    };
  },
  filters: {
    to100(res) {
      return parseInt(res*100)+"%";
    },
  },
  created() {
    this.questionInfoId=this.$router.currentRoute.query.id;
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      this.query.questionInfoId=this.questionInfoId
      getQuestionInfoUseInfo(this.query).then((res) => {
        this.list = res.data;
        this.query.total = res.page.total;
        this.listLoading = false;
      });
    },
     handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.pageNo = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.pageNo = val;
      this.getList();
    },
  },
};
</script>

<style>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
.el-table .success-row {
  color: #dcdfe6;
}
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
</style>

<style scoped>
.page {
  margin-top: 10px;
}

.icon-star {
  margin-right: 2px;
}

.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.show-d {
  margin-top: 15px;
}
</style>
